<template>
	<view class="container">
		<!--header-->
		<view class="view-box" :style="{ height: height + 'px', background: 'rgba(255,255,255,' + opcity + ')' }">
			<view class="view" :style="{ paddingTop: top + 'px', opacity: opcity }">商品详情</view>
			<view class="view-icon" :style="{ marginTop: top + 'px' }">
				<view class="tui-icon-box" :style="{ backgroundColor: 'rgba(0, 0, 0,' + iconOpcity + ')' }" @tap="back">
					<tui-icon name="arrowleft" :size="30" :color="opcity >= 1 ? '#000' : '#fff'"></tui-icon>
				</view>

				<view class="tui-icon-box tui-icon-ml" :style="{backgroundColor: 'rgba(0, 0, 0,' + iconOpcity + ')'}"
					@tap.stop="openMenu">
					<tui-icon name="more-fill" :size="20" :color="opcity >= 1 ? '#000' : '#fff'"></tui-icon>
					<tui-badge type="red" :scaleRatio="0.8" absolute top="0" right="-4rpx">0</tui-badge>
				</view>

			</view>
		</view>
		<!--header-->

		<!--banner-->
		<view class="tui-banner-swiper">
			<swiper :autoplay="true" :interval="5000" :duration="150" :circular="true"
				:style="{ height: scrollH + 'px' }" @change="bannerChange">
				<block v-for="(item, index) in banner" :key="index">
					<swiper-item :data-index="index" @tap.stop="previewImage">
						<image :src="item.pic_cover" class="tui-slide-image" :style="{ height: scrollH + 'px' }" />
					</swiper-item>
				</block>
			</swiper>
			<view class="tui-banner-tag">
				<tui-tag padding="12rpx 18rpx" type="translucent" shape="circleLeft" :scaleMultiple="0.82" originRight>
					{{ bannerIndex + 1 }}/{{ banner.length }}
				</tui-tag>
			</view>
		</view>

		<!--banner-->

		<view class="tui-pro-detail">
			<view class="tui-product-title tui-border-radius">
				<view class="tui-pro-pricebox tui-padding" v-if="productInfo.category_id_1!=36">
					<view class="tui-pro-price">
						<view>
							<text>￥</text>
							<text class="tui-price">{{productInfo.promotion_price}}</text>
							<text>{{productInfo.priceMin}}</text>
						</view>
						<tui-tag padding="10rpx 20rpx" size="24rpx" plain type="high-green" shape="circle"
							:scaleMultiple="0.8">新品</tui-tag>
					</view>
					<view class="tui-collection tui-size" @tap="collecting">
						<tui-icon :name="collected ? 'like-fill' : 'like'" :color="collected ? '#ff201f' : '#333'"
							:size="20"></tui-icon>
						<view class="tui-scale-collection" :class="{'tui-icon-red':collected}">收藏</view>
					</view>
				</view>
				<view class="tui-pro-pricebox tui-padding price-box" v-else>
					<view class="price-title">
						<view class="pro-nt">
							<image src="/static/images/mall/jfd.png" class="dh-icon"
								v-if="productInfo.category_id_1==2">
							</image>
							<image src="/static/images/mall/thq.png" class="dh-icon" v-else></image>
						</view>
						<view class="pro-price">
							<view>
								<view v-if="productInfo.point_exchange_type!=3">
									<text class="pro-price-nm" v-if="productInfo.point_exchange_type!=3">¥</text>
									<text class="normal-price"
										v-if="productInfo.point_exchange_type!=3">{{productInfo.promotion_price}}</text>
									<text>.{{productInfo.priceMin}}</text>
									<text>+</text>
								</view>
								<text class="point-price">{{productInfo.point_exchange}}抵扣券</text>
							</view>
							<view>
								<text class="line-through">¥{{productInfo.market_price}}</text>
							</view>

						</view>
					</view>

					<view class="tui-collection tui-size" @tap="collecting">
						<tui-icon :name="collected ? 'like-fill' : 'like'" :color="collected ? '#ff201f' : '#333'"
							:size="20"></tui-icon>
						<view class="tui-scale-collection" :class="{'tui-icon-red':collected}">收藏</view>
					</view>
				</view>
				<!-- 	<view class="tui-original-price tui-gray"
					v-if="productInfo.category_id!=37">
					价格
					<text class="tui-line-through">￥{{productInfo.market_price}}</text>
				</view> -->
				<view class="tui-pro-titbox">
					<view class="tui-pro-title">{{productInfo.goods_name}}</view>
					<!-- 	<button open-type="share" class="tui-share-btn tui-share-position" @tap="onShare()">
						<tui-tag type="gray" shape="circleLeft" padding="12rpx 16rpx">
							<view class="tui-share-box">
								<tui-icon name="partake" color="#999" :size="15"></tui-icon>
								<text class="tui-share-text tui-gray tui-size">分享</text>
							</view>
						</tui-tag>
					</button> -->
				</view>
				<view class="tui-padding">

					<view class="tui-sale-info tui-size tui-gray">
						<view>运费：{{shipping_fee}}</view>
						<view>库存：{{productInfo.stock}}</view>
						<view>销量:{{productInfo.sales}}</view>
					</view>
				</view>
			</view>



			<view class="tui-basic-info tui-mtop tui-radius-all">
				<view class="tui-list-cell" v-if="productInfo.category_id==2">
					<view class="tui-bold tui-cell-title" v-if="productInfo.category_id==2">抵扣</view>

					<view class="tui-flex-center" v-if="productInfo.category_id==2">
						<tui-tag type="red" shape="circle" padding="12rpx 24rpx" size="24rpx">
							需兑换券{{productInfo.point_exchange}}积分</tui-tag>
					</view>

					<view class="tui-ml-auto">
						<tui-icon name="more-fill" :size="20" color="#666"></tui-icon>
					</view>
				</view>

				<view class="tui-list-cell" @tap="showPopup">
					<view class="tui-bold tui-cell-title">已选</view>
					<view class="tui-selected-box">{{productInfo.goods_name}}</view>
					<view class="tui-ml-auto">
						<tui-icon name="more-fill" :size="20" color="#666"></tui-icon>
					</view>
				</view>
				<view class="tui-list-cell">
					<view class="tui-bold tui-cell-title">邮寄</view>
					<view class="tui-selected-box">邮寄方式</view>
					<view class="tui-ml-auto">
						<tui-icon name="more-fill" :size="20" color="#666"></tui-icon>
					</view>
				</view>
				<!-- <view class="tui-list-cell tui-last">
					<view class="tui-bold tui-cell-title">运费</view>
					<view class="tui-selected-box" v-if="shipping_fee==0">在线支付免邮</view>
					<view class="tui-selected-box" v-else>在线支付运费{{shipping_fee}}元</view>
				</view> -->
			</view>


			<view class="tui-nomore-box">
				<tui-nomore text="宝贝详情" backgroundColor="#f7f7f7"></tui-nomore>
			</view>
			<view class="tui-product-img tui-radius-all">
				<rich-text :nodes="productInfo.description"></rich-text>
			</view>
			<tui-nomore text="已经到最底了" backgroundColor="#f7f7f7"></tui-nomore>
			<view class="tui-safearea-bottom"></view>
		</view>

		<!--底部操作栏-->
		<view class="tui-operation">

			<view class="tui-operation-right tui-right-flex tui-col-12 tui-btnbox-4">

				<view class="tui-flex-1">
					<tui-button height="78rpx" :size="26" type="warning" shape="circle" @click="showPopup">立即购买
					</tui-button>
				</view>
			</view>
		</view>

		<!--底部操作栏--->

		<!--顶部下拉菜单-->
		<tui-top-dropdown backgroundColor="rgba(76, 76, 76, 0.95)" :show="menuShow" :height="0" @close="closeMenu">
			<view class="tui-menu-box tui-padding tui-ptop">
				<view class="tui-menu-header" :style="{ paddingTop: top + 'px' }">功能直达</view>
				<view class="tui-menu-itembox">
					<block v-for="(item, index) in topMenu" :key="index">
						<view class="tui-menu-item" hover-class="tui-opcity" :hover-stay-time="150"
							@tap="btnTopMenu(index)">
							<view class="tui-badge-box">
								<tui-icon :name="item.icon" color="#fff" :size="item.size"></tui-icon>
								<tui-badge type="red" :scaleRatio="0.8" absolute right="-8rpx" v-if="item.badge">
									{{ item.badge }}
								</tui-badge>
							</view>
							<view class="tui-menu-text">{{ item.text }}</view>
						</view>
					</block>
				</view>
				<view class="tui-icon-up_box">
					<tui-icon name="up" color="#fff" :size="26" @click="closeMenu"></tui-icon>
				</view>
			</view>
		</tui-top-dropdown>
		<!---顶部下拉菜单-->

		<!--底部选择层-->
		<tui-bottom-popup :show="popupShow" @close="hidePopup">
			<view class="tui-popup-box">
				<view class="tui-product-box tui-padding">
					<image :src="pic_cover_small" class="tui-popup-img"></image>
					<view class="tui-popup-price">

						<view class="tui-amount tui-bold" v-if="productInfo.point_exchange_type==1">
							￥{{productInfo.promotion_price}}
							<text class="yui-point-price">+{{productInfo.point_exchange}}兑换券</text>
						</view>
						<view class="tui-amount tui-bold" v-else>￥{{productInfo.promotion_price}}</view>
						<view class="tui-number">库存:{{skuinfo.stock}}</view>
					</view>
				</view>
				<view class="yui-model-spec-list" v-for="(item, index) in spec_list" :key="index">
					<view class="concne-one-texts">{{item.spec_name}}</view>
					<view class="Specifications-popup-sele-list">
						<view class="sele-list-block" v-for="(items, childIndex) in item.value" :key="childIndex">

							<view @click="selectItem(items,index,childIndex)"
								:class="subIndex[index] == childIndex?'concne-one-span2':'concne-one-span'">
								{{items.spec_value_name}}
							</view>
						</view>
					</view>
				</view>
				<scroll-view scroll-y class="tui-popup-scroll">
					
						<view class="tui-scrollview-box">
							<view class="tui-number-box tui-bold tui-attr-title">
								<view class="tui-attr-title">数量</view>
								<tui-numberbox :max="99" :min="1" :value="value" @change="change"></tui-numberbox>
							</view>
						</view>
				</scroll-view>
				<view class="tui-operation tui-operation-right tui-right-flex tui-popup-btn">
					<view class="tui-flex-1">
						<tui-button height="72rpx" :size="28" type="warning" shape="circle" @click="submit"
							:loading="isloading" :disabled="isdisabled">立即购买</tui-button>
					</view>
				</view>
				<view class="tui-right">
					<tui-icon name="close-fill" color="#999" :size="20" @click="hidePopup"></tui-icon>
				</view>
			</view>
		</tui-bottom-popup>
		<!-- 自提点 -->
		<!-- <tui-bottom-popup :show="popupPickShow" @close="hidePickPopup">
			<view class="tui-popup-box">
				<view class="tui-popup-box-center">默认地址
				  <view class="tui-popup-box-center-small">(佣金收货后结算)</view>
			
				</view>
				<view class="yui-model-spec-list">
					<view class="Specifications-popup-sele-list">
							<view @click="selectAddress()"
								:class="subIndexs== 3?'concne-one-span2':'concne-one-span'">
								默认地址
							</view>
					
					</view>
				</view>
				
				<view class="tui-operation tui-operation-right tui-right-flex tui-popup-btn">
					<view class="tui-flex-1">
						<tui-button height="72rpx" :size="28" type="warning" shape="circle" @click="submitPick"
							:loading="isloading" :disabled="isdisabled">确定当前自提点</tui-button>
					</view>
				</view>
				<view class="tui-right">
					<tui-icon name="close-fill" color="#999" :size="20" @click="hidePickPopup"></tui-icon>
				</view>
				<view class="tui-popup-box-center">选择自提<view class="tui-popup-box-center-small">(佣金立即结算)</view></view>
				<view class="yui-model-spec-list" v-for="(item, index) in picklist" :key="index">
					<view class="yui-model-pick-list">
						{{item.name}}
					</view>
					<view class="Specifications-popup-sele-list">
							<view @click="selectItems(item,index)"
								:class="subIndexs== index?'concne-one-span2':'concne-one-span'">
								{{item.province_name}}{{item.city_name}}{{item.dictrict_name}}{{item.address}}
							</view>
					
					</view>
				</view>

				<view class="tui-operation tui-operation-right tui-right-flex tui-popup-btn">
					<view class="tui-flex-1">
						<tui-button height="72rpx" :size="28" type="warning" shape="circle" @click="submitPick"
							:loading="isloading" :disabled="isdisabled">确定当前地址</tui-button>
					</view>
				</view>
				<view class="tui-right">
					<tui-icon name="close-fill" color="#999" :size="20" @click="hidePickPopup"></tui-icon>
				</view>
			</view>
		</tui-bottom-popup> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 64, //header高度
				top: 26, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				iconOpcity: 0.5,
				banner: [],
				bannerIndex: 0,
				picklist:'',
				topMenu: [
					{
						icon: 'home',
						text: '首页',
						size: 23,
						badge: 0
					},
					{
						icon: 'people',
						text: '我的',
						size: 26,
						badge: 0
					}
				],
				productInfo: '',
				menuShow: false,
				popupShow: false,
				value: 1,
				collected: false,
				popupPickShow: false,
				goods_id: '',
				cartNum: '0',
				noraml_price: '',
				shipping_fee: '',
				pic_cover_small: '',
				delivery_money: '',
				xf_money: '',
				category_id: '',
				isdisabled: false,
				isloading: false,
				shareid: '',
				noClick: false,
				spec_list: '',
				subIndex: [],
				subIndexs:0,
				selectArr: [], // 存放被选中的值
				selectPick: '', // 存放被选中的值
				skuinfo: {},
				pickup_id:0,
				shipping_type:1,

			};
		},
		// onShareAppMessage(res) {
		// 	if (res.from === 'button') { // 来自页面内分享按钮
		// 	}
		// 	this.userinfo = this.tui.getUserInfoData();
		// 	return {
		// 		title: this.productInfo.goods_name,
		// 		path: this.tui.interfaceUrl() + 'index.html#/pages/productDetail/productDetail?goods_id=' + this
		// 			.productInfo.goods_id + "&shareid=" + this.userinfo.user_tel,
		// 		imageUrl: this.productInfo.picture_detail.pic_cover_big,
		// 	}
		// },
		onLoad: function(options) {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			//this.tui.haslogin();


			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						this.width = obj.left || res.windowWidth;
						this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight +
							44;
						this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res
							.statusBarHeight + 6;
						this.scrollH = res.windowWidth;
					}
				});
			}, 0);
			if (options) {
				this.goods_id = options.goods_id;

				if (options.shareid != '') {
					this.shareid = options.shareid
				}
				this.category_id = options.category_id;

				// #ifndef MP-WEIXIN
				if (this.tui.isLogin()) {
					//this.carts();
				}
				// #endif
				//#ifdef MP-WEIXIN
				if (this.tui.getToken()) {
					//	this.carts();
				}
				//#endif
				this.initData();


			}
		},
		methods: {
			bannerChange: function(e) {
				this.bannerIndex = e.detail.current;
			},
			previewImage: function(e) {
				let index = e.currentTarget.dataset.index;
				uni.previewImage({
					current: this.banner[index],
					urls: this.banner
				});
			},
			back: function() {
				let pages = getCurrentPages();
				let currPage = pages[pages.length - 1]; //当前页面
				let prevPage = pages[pages.length - 2]; //上一个页面
				// console.log(prevPage);return;
				// prevPage.setData({
				//   category_id:this.category_id,
				// })
				//#ifdef MP-WEIXIN
				prevPage.onLoad()
				//#endif
				uni.navigateBack();
			},
			openMenu: function() {
				this.menuShow = true;
			},
			closeMenu: function() {
				this.menuShow = false;
			},
			showPopup: function() {
				this.popupShow = true;
			},
			hidePopup: function() {
				this.popupShow = false;
			},
			showPickPopup: function() {
				this.popupPickShow = true;
			},
			hidePickPopup: function() {
				this.popupPickShow = false;
			},
			couponsShow: function() {
				this.couponShow = true;
			},
			hideCouponPopup: function() {
				this.couponShow = false;
			},
			change: function(e) {
				this.value = e.value;
			},
			collecting: function() {
				this.collected = !this.collected;
			},
			common: function() {
				this.tui.toast('功能开发中~');
			},
			customer: function() {
				this.tui.toast('暂时未上线~');
			},
            /* 自提点列表*/
			pickList(){
				let token = this.tui.getToken();
				let picklist = this.tui.request('shop', 'post', {
					token: token,shop_id:0,page:1
				}, 1000, 1, '', 'pickUpList');
				Promise.resolve(picklist).then((value) => {
					this.picklist = value.data.data;
					this.shipping_type=2;
				})
			},
			initData() {
				this.pickList();
				// this.onShare();
				let token = this.tui.getToken();
				let datas = {
					token: token,
					goods_id: this.goods_id,
				};
				let result = this.tui.request('goods', 'post', datas, 1000, 1, '', 'goodsDetail');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						this.productInfo = value.data;
						let priceStr = this.productInfo.promotion_price.split(".");
						// this.productInfo.promotion_price = priceStr[0];

						// this.productInfo.priceMin = priceStr[1];
						this.banner = value.data.img_temp_array;
						this.shipping_fee = value.data.shipping_fee_name;
						this.sku_list = this.productInfo.sku_list;
						this.pic_cover_small = value.data.img_temp_array[0]['pic_cover'];
						if (this.productInfo.category_id == 2) {
							this.noraml_price = parseInt(this.productInfo.promotion_price) + parseInt(this
								.productInfo.point_exchange);
						} else {
							this.noraml_price = this.productInfo.promotion_price;
						}

						if (this.productInfo.spec_list[0]) {

							this.spec_list = this.productInfo.spec_list;
							this.spec_list.forEach((item, index) => {
								this.selectItem(item.value[0], index, 0);
							});
						} else {
							this.skuinfo.price = this.productInfo.promotion_price;
							this.skuinfo.stock = this.productInfo.stock;
							this.skuinfo.sku_id = this.productInfo.sku_list[0].sku_id

						}

						this.$set(this.productInfo, 'counter', 1)



						if (this.productInfo.description) {
							let srcArr = this.productInfo.description.match(/<img\b.*?(?:\>|\/>)/gi);
							let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
							let Images = '';
							if (srcArr) {
								for (var i = 0; i < srcArr.length; i++) {
									var src = srcArr[i].match(srcReg);
									if (src[1].substr(0, 1) != 'h') {
										src[1] = this.tui.interfaceUrl() + "/" + src[1]
									}
									//获取图片地址
									Images += `<img style="width:100%;height:auto;font-size:0" src="${src[1]}">`;
								}
								this.productInfo.description = Images;
							}
						}
					} else {
						this.tui.toast(value.message);
					}
				})

			},
			// selectAddress(){
			//    this.subIndexs=3;
			//    this.shipping_type=1;
			// },
			selectItem(res, index, resIndex) {
				let t = this;
				t.selectArr[index] = res;
				t.subIndex[index] = resIndex;
				
				t.checkItem();
			},
			selectItems(res, index) {
				let t = this;
				t.selectPick = res['id'];
				t.subIndexs= index;
			
				t.checkItems();
				this.shipping_type=2;
			},
			checkItems: function() {
				var self = this;
				self.$forceUpdate(); // 重绘
			},
			submitPick(){
				this.pickup_id=this.selectPick;
				this.hidePickPopup();
			},
			checkItem: function() {
				var self = this;

				var result = []; // 定义数组存储被选中的值

				// console.log(option);
				for (let i in this.selectArr) {
					result.push(self.selectArr[i]['spec_id'] + ":" + self.selectArr[i]['spec_value_id'])
				}
				let strings = '';
				for (let i in result) {
					strings += result[i] + ";";
				}
				strings = strings.substring(0, strings.length - 1);

				this.sku_list.forEach((item, index) => {
					
					
					if (item.attr_value_items == strings) {
						
						this.skuinfo = item;
						// console.log(item)
						this.skuinfo.goods_name = this.productInfo.goods_name;
						this.skuinfo.goods_img = this.productInfo.img_temp_array[0].pic_cover_small;
					}
				});
				self.$forceUpdate(); // 重绘
			},
			carts() {
				let token = this.tui.getToken();
				let cartnums = this.tui.request('goods', 'post', {
					token: token
				}, 1000, 1, '', 'cartNum');
				Promise.resolve(cartnums).then((value) => {
					this.cartNum = value.data.cart_num;
				})
			},
			btnTopMenu(index) {
				this.closeMenu()
				if (index == 4) {
					uni.makePhoneCall({
						phoneNumber: "10086"
					})
				} else if (index == 6) {
					// #ifdef MP
					this.common()
					// #endif

					// #ifndef MP
					this.onShare()
					// #endif
				} else {
					let url = {
						0: '../message/message',
						1: "../mall/mall",
						2: '../my/my',
						3: '../shopcart/shopcart',
						5: '/pages/my/feedback/feedback?page=mall'
					} [index];
					url && this.tui.href(url)
				}
			},
			submit() {
				if (!this.tui.getToken()) {
					this.tui.haslogin(this.shareid);
				}
				this.isloading = true;
				if (this.noClick == true) {
					this.tui.toast('请勿重复提交');
					return false;
				}
				this.noClick = true;
				this.isdisabled = true;
				let shopMsg = {
					// gid_num_sku: this.productInfo.sku_list[0].sku_id + ':' + this.value + ':' + '-1',
					gid_num_sku: this.skuinfo.sku_id + ':' + this.value + ':' + '-1',
					goods_type: this.productInfo.goods_type,
					purchase_type: '1',
					shipfee: this.productInfo.shipping_fee,
					cart: false,
					pickup_id:this.pickup_id,
					shipping_type:this.shipping_type
				}
				
				let shopsMsg = JSON.stringify(shopMsg);
				if (this.productInfo.category_id == 2 || this.productInfo.category_id == 4 || this.productInfo
					.category_id == 114) {
					let token = this.tui.getToken();
					let obj = {
						token: token,
						sku_id: this.skuinfo.sku_id,
						num: this.value,
					
					}
					/* 先预计是否足够 */
					let orders = this.tui.request('order', 'post', obj, 1000, 1, '', 'buyOrderInfo');
					Promise.resolve(orders).then((value) => {
						if (value.code == 10000) {
							this.popupShow = false;
							uni.navigateTo({
								url: '../submitOrder/submitOrder?shopsMsg=' + shopsMsg
							});
						} else {
							this.tui.toast(value.message);
							this.isloading = false;
							this.isdisabled = false;
							this.noClick = false;
						}
					})
				} else {
					uni.navigateTo({
						url: '../submitOrder/submitOrder?shopsMsg=' + shopsMsg
					});
				}

			},
			submitCart() {
				if (!this.tui.getToken()) {
					this.tui.haslogin(this.shareid);
				}
				this.isloading = true;
				this.isdisabled = true;
				this.popupShow = false;
				let token = this.tui.getToken();
				let datas = {
					token: token,
					sku_id: this.productInfo.sku_list[0].sku_id,
					num: this.value,
				};
				let cartnums = this.tui.request('goods', 'post', datas, 1000, 1, '', 'addCart');
				Promise.resolve(cartnums).then((value) => {
					if (value.code == 10000) {
						this.tui.toast(value.message);
						setTimeout(() => {
							uni.switchTab({
								url: '../shopCart/shopCart'
							});
						}, 1000)

					} else {
						this.tui.toast(value.message);
						this.isloading = false;
						this.isdisabled = false;
					}
				})
			},
			coupon() {
				uni.navigateTo({
					url: '../coupon/coupon'
				});
			},
			onStore() {
				uni.switchTab({
					url: '../index/index'
				});
			},
			onCart() {
				uni.switchTab({
					url: '../shopCart/shopCart'
				});
			},
			onShare() {
				//#ifdef APP-PLUS
				let urls = 'https://store.tpyxdzsw.com/index.html#/pages/productDetail/productDetail?goods_id=' + this
					.productInfo.goods_id;
				uni.shareWithSystem({
					provider: "weixin",
					// scene: "WXSceneSession",
					summary: '2',
					href: urls,
					success: function(res) {
						uni.showToast({
							title: JSON.stringify(err),
							duration: 2000,
							icon: 'none'
						});
					},
					fail: function(err) {

						console.log("fail:" + JSON.stringify(err));
					}
				});
				//#endif
				// #ifdef H5
				// var jweixin = require('jweixin-module')
				// let token = this.tui.getToken();
				// let obj = {
				// 	token: token,
				// 	url: encodeURIComponent(window.location.href.split('#')[0]),
				// }
				// let orders = this.tui.request('user', 'post', obj, 1000, 1, '', 'wxShare');
				// let that = this;
				// Promise.resolve(orders).then((value) => {
				// 	if (value.code == 10000) {
				// 		jweixin.config({
				// 			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
				// 			appId: value.data.appId, // 必填，公众号的唯一标识  
				// 			timestamp: value.data.timestamp, // 必填，生成签名的时间戳  
				// 			nonceStr: value.data.nonceStr, // 必填，生成签名的随机串  
				// 			signature: value.data.signature, // 必填，签名，见附录1  
				// 			surl: value.data.url, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确  
				// 			jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
				// 		});
				// 		jweixin.ready(function() {
				// 			//自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）

				// 			let descs = that.productInfo.goods_name;
				// 			// console.log(that.pic_cover_small)
				// 			jweixin.updateAppMessageShareData({
				// 				title: that.productInfo.goods_name,
				// 				desc: descs, // 分享描述
				// 				link: window.location.href,
				// 				imgUrl: that.pic_cover_small,
				// 				success: function(res) {
				// 					console.log(res)
				// 				},

				// 			});
				// 			//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）  
				// 			jweixin.updateTimelineShareData({
				// 				title: that.productInfo.goods_name,
				// 				link: window.location.href,
				// 				imgUrl: that.pic_cover_small,
				// 				success: function() {
				// 					// 用户确认分享后执行的回调函数  
				// 				},
				// 			});

				// 		});
				// 	} else {
				// 		this.showToast(value.message)

				// 	}
				// })

				// #endif
			},
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / this.scrollH;
			if (this.opcity >= 1 && opcity >= 1) {
				return;
			}
			this.opcity = opcity;
			this.iconOpcity = 0.5 * (1 - opcity < 0 ? 0 : 1 - opcity);
		}
	};
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.container {
		padding-bottom: 110rpx;
	}

	.top-none {
		padding-top: 0px !important;
	}

	.view-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 995;
	}
    .pl24 {
        padding-left: 12px;
    }
	.h32 {
	    height: 16px;
	}
	.w32 {
	    width: 16px;
	}
	.point-price {
		font-size: 34rpx;
	}

	.yui-point-price {
		font-size: 30rpx;
		color: #f5b82b
	}
	.tui-popup-box-center-small{
		font-size: 24rpx;
		color:#f79229
	}
    .yui-attr-box{
		background-color: rgb(253, 235, 224);
		margin:0rpx 28rpx;
		border-radius: 20rpx;
	}
	.tui-popup-box-center{
		text-align: center;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		font-size: 30rpx !important;
	}
	.yui-model-pick-list{
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		color:#333;
	}
	.view {
		width: 100%;
		font-size: 18px;
		line-height: 18px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yui-model-spec-list {
		margin-left: 30rpx;
		margin-bottom: 30rpx;
	}

	.sele-list-block {
		display: inline-block;
		margin-bottom: 16rpx;
	}

	.concne-one-texts {
		margin-top: 32rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		margin-bottom: 20rpx;
		line-height: 32rpx;
		color: #1f1f1f;
	}

	.concne-one-span {

		background: rgba(169, 169, 169, 0.24);
		border-radius: 16rpx;
		padding: 6rpx 20rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 32rpx;
		color: #333333;
		margin-right: 20rpx;
	}

	.concne-one-span2 {

		background: rgba(253, 168, 174, 0.2);
		border-radius: 16rpx;
		padding: 6rpx 20rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 32rpx;
		color: #f73333;
		margin-right: 20rpx;
	}

	.price-title {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.view-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}

	.dh-icon {
		width: 74%;
		align-items: center;
		margin-top: 14%;
		margin-left: 14%;
		height: 74%;
	}

	.view-icon .tui-badge {
		background: #e41f19 !important;
		position: absolute;
		right: -4px;
	}

	.pro-nt {
		background: rgba(0, 0, 0, 0.2);
		width: 76rpx;
		height: 76rpx;
		border-radius: 10rpx;
		margin-left: -12rpx;
		margin-right: 20rpx;
	}

	.tui-icon-ml {
		margin-left: 20rpx;
	}

	.tui-icon-box {
		position: relative;
		height: 20px !important;
		width: 20px !important;
		padding: 6px !important;

		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-banner-swiper {
		position: relative;
	}

	.price-box {
		background: linear-gradient(to left, #ff3b00, #ff0018);
		height: 112rpx;
		line-height: 34rpx !important;
	}

	.pro-price {
		color: #fff
	}

	.normal-price {
		font-size: 46rpx;
	}

	.pro-price-nm {
		font-size: 32rpx;
		font-weight: bold;
	}

	.coupon_voucher {
		width: 100%;
		display: flex;
		color: #c88717;
		/* background:linear-gradient(to left, #f5f4f0, #fffffb); */
		background: #f3a229;
		padding: 6rpx 30rpx;
		border-top: 6px solid;
		box-shadow: 0 0 6px 0 rgba(0, 0, 0, .1);
		border-radius: 6px;
	}

	.tui-coupon-item-right {
		flex: 1;
		height: 150rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.font12 {
		font-size: 26rpx;
	}

	.tui-coupon-item-left {
		width: 358rpx;
		/* 		height: 110rpx; */
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		/* 	flex-direction: column; */
		flex-shrink: 0;
	}

	.tui-coupon-intro {
		margin-top: 4rpx;
		padding: 4px 5px;
		font-size: 24rpx;
		color: #ffffff
	}

	.tui-coupon-price-box {
		display: flex;
		color: #ffffff;
		align-items: flex-end;
	}

	.tui-coupon-price-sign {
		font-size: 30rpx;
	}

	.tui-coupon-price {
		font-size: 66rpx;
		line-height: 68rpx;
		font-weight: bold;
	}

	.tui-price-small {
		font-size: 58rpx !important;
		line-height: 56rpx !important;
	}

	.line-through {
		font-size: 26rpx;
		line-height: 1rpx;
		text-decoration: line-through;
		color: #fff;
		opacity: .9;
		font-weight: normal;
	}

	.tui-banner-tag {
		position: absolute;
		color: #fff;
		bottom: 30rpx;
		right: 0;
	}

	.tui-slide-image {
		width: 100%;
		display: block;
	}

	/*顶部菜单*/

	.tui-menu-box {
		box-sizing: border-box;
	}

	.tui-menu-header {
		font-size: 34rpx;
		color: #fff;
		height: 32px;
		display: flex;
		align-items: center;
	}

	.tui-btn-coupon {
		margin: 20rpx 40rpx;
	}

	.coupon-title {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.tui-coupon-radio {
		transform: scale(0.7);
		transform-origin: 100% center;
	}

	.tui-coupon-content {
		width: 82%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.tui-coupon-title-box {
		display: flex;
		align-items: center;
	}

	.tui-coupon-btn {
		padding: 12rpx 18rpx;
		background: #b15a11;
		color: #fff;
		border-radius: 24rpx;
		font-size: 25rpx;
		/* 	line-height: 25rpx; */
		display: flex;
		align-items: center;
		justify-content: center;
		transform: scale(0.9);
		transform-origin: 0 center;
		flex-shrink: 0;
	}

	.tui-menu-itembox {
		color: #fff;
		padding: 40rpx 10rpx 0 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		font-size: 26rpx;
	}

	.tui-menu-item {
		width: 22%;
		height: 160rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		/* flex-direction: column; */
		justify-content: center;
		background: rgba(0, 0, 0, 0.4);
		margin-right: 4%;
		margin-bottom: 4%;
	}

	.tui-menu-item:nth-of-type(4n) {
		margin-right: 0;
	}

	.item-left-m:nth-child(2n) {
		margin-left: 20rpx;
		border-left: 1px dashed #f1f1f1;
		padding-left: 20rpx;
	}

	.tui-badge-box {
		position: relative;
	}

	.tui-badge-box .tui-badge-class {
		position: absolute;
		top: -8px;
		right: -8px;
	}

	.tui-msg-badge {
		top: -10px;
	}

	.tui-icon-up_box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-menu-text {
		padding-top: 12rpx;
	}

	.tui-opcity .tui-menu-text,
	.tui-opcity .tui-badge-box {
		opacity: 0.5;
		transition: opacity 0.2s ease-in-out;
	}

	/*顶部菜单*/

	/*内容 部分*/

	.tui-padding {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-ml-auto {
		margin-left: auto;
	}

	/* #ifdef H5 */
	.tui-ptop {
		padding-top: 44px;
	}

	/* #endif */

	.tui-size {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-gray {
		color: #999;
	}

	.tui-icon-red {
		color: #ff201f;
	}

	.tui-border-radius {
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		overflow: hidden;
	}

	.tui-radius-all {
		border-radius: 24rpx;
		overflow: hidden;
	}

	.tui-mtop {
		margin-top: 26rpx;
	}

	.tui-pro-detail {
		box-sizing: border-box;
		color: #333;
	}

	.tui-product-title {
		background: #fff;
		padding: 30rpx 0;
	}

	.tui-pro-pricebox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #ff201f;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 44rpx;
	}

	.tui-pro-price {
		display: flex;
		align-items: center;
	}

	.tui-price {
		font-size: 58rpx;
	}

	.tui-original-price {
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-line-through {
		text-decoration: line-through;
	}

	.tui-collection {
		color: #333;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: 44rpx;
	}

	.tui-scale-collection {
		transform: scale(0.7);
		transform-origin: center 90%;
		line-height: 24rpx;
		font-weight: normal;
		margin-top: 4rpx;
	}

	.tui-pro-titbox {
		font-size: 32rpx;
		font-weight: 500;
		position: relative;
		padding: 0 150rpx 0 30rpx;
		box-sizing: border-box;
	}

	.tui-pro-title {
		padding-top: 20rpx;
	}

	.tui-share-btn {
		display: block;
		background: transparent;
		margin: 0;
		padding: 0;
		border-radius: 0;
		border: 0;
	}

	.tui-share-btn::after {
		border: 0;
	}

	.tui-share-box {
		display: flex;
		align-items: center;
	}

	.tui-share-position {
		position: absolute;
		right: 0;
		top: 30rpx;
	}

	.tui-share-text {
		padding-left: 8rpx;
	}

	.tui-sub-title {
		padding: 20rpx 0;
		line-height: 32rpx;
	}

	.tui-sale-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 30rpx;
	}

	.tui-discount-box {
		background: #fff;
	}

	.tui-list-cell {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 36rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-right {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.tui-top40 {
		top: 40rpx !important;
	}

	.tui-bold {
		font-weight: bold;
	}

	.tui-list-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 126rpx;
	}

	.tui-last::after {
		border-bottom: 0 !important;
	}

	.tui-flex-center {
		display: flex;
		align-items: center;
	}


	.tui-cell-title {
		width: 66rpx;
		padding-right: 30rpx;
		flex-shrink: 0;
	}

	.tui-promotion-box {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		width: 80%;
	}

	.tui-promotion-box text {
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-basic-info {
		background: #fff;
	}

	.tui-addr-box {
		width: 76%;
	}

	.tui-addr-item {
		padding: 10rpx;
		line-height: 34rpx;
	}

	.tui-guarantee {
		background: #fdfdfd;
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 30rpx 30rpx 30rpx;
		font-size: 24rpx;
	}

	.tui-guarantee-item {
		color: #999;
		padding-right: 30rpx;
		padding-top: 10rpx;
	}

	.tui-pl {
		padding-left: 4rpx;
	}

	.tui-cmt-box {
		background: #fff;
	}

	.tui-between {
		justify-content: space-between !important;
	}

	.tui-cmt-all {
		color: #ff201f;
		padding-right: 8rpx;
	}

	.tui-cmt-content {
		font-size: 26rpx;
	}

	.tui-cmt-user {
		display: flex;
		align-items: center;
	}

	.tui-acatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		display: block;
		margin-right: 16rpx;
	}

	.tui-cmt {
		padding: 14rpx 0;
	}

	.tui-attr {
		font-size: 24rpx;
		color: #999;
		padding: 6rpx 0;
	}

	.tui-cmt-btn {
		padding: 50rpx 0 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-nomore-box {
		padding-top: 10rpx;
	}

	.tui-product-img {
		display: flex;
		font-size: 0rpx;
		flex-direction: column;
		transform: translateZ(0);
	}

	.tui-product-img img {
		width: 100%;
		display: block;
		padding:0rpx;
		margin:0rpx;
	}

	/*底部操作栏*/

	.tui-col-7 {
		width: 58.33333333%;
	}
	.tui-col-12 {
		width: 100%;
	}

	.tui-col-5 {
		width: 41.66666667%;
	}

	.tui-operation {
		width: 100%;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.98);
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-operation-left {
		display: flex;
		align-items: center;
	}

	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}

	.tui-operation-text {
		font-size: 22rpx;
		color: #333;
	}

	.tui-opacity {
		opacity: 0.5;
	}

	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}

	.tui-operation-right {
		height: 100rpx;
		padding-top: 0;
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-flex-1 {
		flex: 1;
		padding: 16rpx;
	}

	/*底部操作栏*/

	/*底部选择弹层*/

	.tui-popup-class {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		position: relative;
		padding: 30rpx 0 100rpx 0;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	/* .tui-popup-btn .tui-btn-class {
		width: 90% !important;
		display: block !important;
		font-size: 28rpx !important;
	} */

	/* .tui-icon-close {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	} */

	.tui-product-box {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
		padding-bottom: 30rpx;
	}

	.tui-popup-img {
		height: 200rpx;
		width: 200rpx;
		border-radius: 24rpx;
		display: block;
	}

	.tui-popup-price {
		padding-left: 20rpx;
		padding-bottom: 8rpx;
	}

	.tui-amount {
		color: #ff201f;
		font-size: 36rpx;
	}

	.tui-number {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 12rpx;
		color: #999;
	}

	.tui-popup-scroll {

		font-size: 26rpx;
	}

	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}

	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;
	}

	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		padding: 0 26rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.tui-attr-active {
		background: #fcedea !important;
		color: #e41f19;
		font-weight: bold;
		position: relative;
	}

	.tui-attr-active::after {
		content: '';
		position: absolute;
		border: 1rpx solid #e41f19;
		width: 100%;
		height: 100%;
		border-radius: 40rpx;
		left: 0;
		top: 0;
	}

	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;
		box-sizing: border-box;
	}

	/*底部选择弹层*/
</style>
